<template>
	<view>
		<view class="goods-list">
			<view v-for="(goods,i) in goodsList" :key="i" @click="gotodetail(goods)">
				<MyGoods :goods="goods"></MyGoods>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import MyGoods from '../../components/MyGoods/MyGoods.vue';
	onLoad((options) => {
		queryobj.query = options.query || ''
		queryobj.cid = options.cid || ''
		getgoodsList()
	})
	onReachBottom(() => {
		// 判断是否还有下一页数据
		if (queryobj.pagenum * queryobj.pagesize >= total.value) return uni.$showMsg('数据加载完毕！')
		// 判断是否正在请求其它数据，如果是，则不发起额外的请求
		if (isloading.value) return
		queryobj.pagenum += 1
		getgoodsList()
	})
	// 下拉刷新的事件
	onPullDownRefresh(() => {
		console.log('999');
		// 1. 重置关键数据
		queryobj.pagenum = 1
		total.value= 0
		isloading.value= false
		goodsList.length=0
		// 2. 重新发起请求
		getgoodsList(() => uni.stopPullDownRefresh())
	})
	const queryobj = reactive({
		query: '',
		cid: '',
		pagenum: 1,
		pagesize: 10
	})
	const goodsList = reactive([])
	const total = ref(0)
	const isloading = ref(false)
	//请求商品列表数据
	const getgoodsList = async (cb) => {
		isloading.value = true
		const {
			data: res
		} = await uni.$http.get('/api/public/v1/goods/search', queryobj)
		isloading.value = false
		// 只要数据请求完毕，就立即按需调用 cb 回调函数
		cb && cb()
		if (res.meta.status !== 200) {
			return uni.$showMsg()
		}
		total.value = res.message.total
		goodsList.push(...res.message.goods)
		// console.log(goodsList);
		// console.log(total.value);
	}
	//跳转到详情页面
	const gotodetail=(goods)=>{
		uni.navigateTo({
			url:`/subpkg/goods_detail/goods_detail?goods_id=${goods.goods_id}`
		})
	}
</script>

<style lang="scss">

</style>